<template>
	<div class="container">
		<div class="content">
			<el-icon size="40px" class="icon1"><UserFilled /></el-icon>
			<h2 class="mb-4">Contact Me</h2>
		</div>
		<div class="content">
			<div class="listContent">
				<div class="option">
					<el-icon class="icon" style="margin-top: 140px">
						<img src="/src/assets/qq.png" style="object-fit: contain" />
					</el-icon>
					<h1>QQ</h1>
					<h2>ID: 920025926</h2>
					<h2>Email:</h2>
					<h2>920025926@qq.com</h2>
				</div>
				<div class="option">
					<el-icon class="icon" style="margin-top: 140px">
						<img src="/src/assets/weixin.png" style="object-fit: contain" />
					</el-icon>
					<h1>Wechat</h1>
					<h2>ID: ab920025926</h2>
					<h2>Username: Arveis</h2>
				</div>
				<div class="option">
					<el-icon class="icon" size="100"><House /></el-icon>
					<h1>Address</h1>
					<h2>
						0605 Dongzhu, Canghai Campus, Shenzhen University, Nanshan District,
						Shenzhen, Guangdong, China
					</h2>
				</div>
				<div class="option">
					<el-icon class="icon" size="100"><Iphone /></el-icon>
					<h1>Phone Num</h1>
					<h2>+86 135 1029 7633</h2>
					<h2>+852 6045 7115</h2>
				</div>
			</div>
		</div>
	</div>
</template>

<style scoped>
.mapContainer {
	width: 95%;
	height: 800px;
	margin: 40px auto;
	margin-top: 0px;
	cursor: pointer;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.24);
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: transform;
	transition-property: transform;
}

.container {
	width: 100%;
	background-color: whitesmoke;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	margin-bottom: 20px;
}

.content {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}
/* 鼠标悬停阴影效果 */
.option {
	background: linear-gradient(
		95deg,
		rgba(180, 254, 255, 1) 0%,
		rgba(255, 223, 154, 1) 100%
	);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	width: 20%;
	height: 650px;
	background-color: white;
	padding: 10px;
	margin: 20px;
	padding-bottom: 90px;
	cursor: pointer;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: transform;
	transition-property: transform;
}

.option:hover {
	-webkit-transform: scale(1.02);
	transform: scale(1.02);
	box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.24);
}

.listContent {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	flex-wrap: wrap;
}

div {
	border-radius: 5px;
}
h2 {
	text-align: center;
}

.icon {
	margin-top: 100px;
}

/* 响应式布局，换行展示 */
@media screen and (min-width: 0px) and (max-width: 900px) {
	.option {
		width: 60%;
		background-color: white;
		margin: 20px;
		padding: 10px;
		cursor: pointer;
	}
}

.mb-4 {
	margin-left: 20px;
	justify-content: center;
	align-items: center;
}

.icon1 {
	margin-left: 15px;
}
</style>

<script lang="ts" setup>
import { reactive, toRefs } from "vue";

const state = reactive({
	circleUrl:
		"https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
	squareUrl:
		"https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
	sizeList: ["small", "", "large"] as const,
});

const { circleUrl, squareUrl, sizeList } = toRefs(state);
</script>
